<template>
	<view id="body">
		<scroll-view scroll-x class="scroll">
			<view class="item" :class="index==navindex ? 'active' : '' " v-for="(item,index) in sports" :key="item.id"
				@click=" clickNav(index)">{{item}}</view>
		</scroll-view>
		<view class="content">
			<view class="date">
				<view v-for="(item, index) in dateList" :key="index" @click="handleDateClick(item)"  style="margin:0 6px;">
					<view class="day" > {{ item.weekday }}</view>
					<h3 style="margin-left:5px;"  :class="item.isToday ? 'today' : ''">{{ item.date }}</h3>
				</view>
			</view>
			<view calss="main">
				<view class="first" v-for="item in testdata" @click="goDetail(item)">
					<view class="title">{{item.type}}</view>
					<view class="mains">
						<view style="margin-bottom: 2px;display:flex;">
							<view style="margin-top:-2px;"> <img src="../static/时间.png"
									style="width:20px;height:20px;"></view>{{item.time}}
							
						</view>
						<view style="display:flex;">
							<view style="margin-left:-2px;"><img src="../static/位置.png"
									style="width:23px;height:23px;"></view>
							{{item.place}}
						</view>
						<view style="margin-top: -3px;display:flex;">
							<view><img src="../static/性别.png" style="width:20px;height:20px;"></view>{{item.sex}}
						</view>
					</view>
					<view class="img">
						<img src="../static/章若楠.png" >
					</view>
					<view class="bottom">

						<view class="button">组队</view>
						<view>2/{{item.number}}人</view>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import { test,testpost } from '@/api/login'
	import { playList } from '@/api/play'
	export default {
		data() {
			return {
				navindex: 0,
				navData: [],
				navArr: [],
				currentPages: 1,
				sports: ['全部','羽毛球', '篮球', '足球', '乒乓球', '跑步', '瑜伽', '跳绳'],	
				weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], // 完整的星期数组
				dateList: [], // 存储日期和星期几的数组
				data:{
					id:2,
					type:"篮球",
					time:"2025-05-12 14:30:00",
					place:"体育馆",
					sex:"男生",
					number:4,
					more:"厉害一点的"
				},
				testdata:{},
				type:"",
			}
		},
		onLoad() {
			
			this.getNewsData();
			// console.log(this.gettestpost (this.data),"aaaa")
			this.gettest();
			
		},
		mounted() {
					// 组件加载时初始化日期列表
					this.getFutureDates();
				},
		methods: {
			handleDateClick(item) {
			    const now = new Date();
			    const year = now.getFullYear();
			    let month = now.getMonth() + 1; // 0-11，所以要加1
			    let day;
			
			    if (item.date === '今日') {
			        // 如果是“今日”，直接用当前的 day
			        day = now.getDate();
			    } else {
			        // 否则提取小数点后的数字
			        const match = item.date.match(/\.(\d+)/);
			        if (match && match[1]) {
			            day = parseInt(match[1]);
			        } else {
			            console.error('无法解析日期:', item.date);
			            return;
			        }
			    }
			
			    // 补零：月份和日都变成两位数格式
			    const formattedMonth = String(month).padStart(2, '0');
			    const formattedDay = String(day).padStart(2, '0');
			
			    // 构造 YYYY-MM-DD 格式
			    const formattedDate = `${year}-${formattedMonth}-${formattedDay}`;
				
				playList({time:formattedDate}).then(res=>{
					console.log(res.rows)
					this.testdata=res.rows
				})
				
			
			    console.log('选中的日期:', formattedDate);
				
			},
			gettest(){
				test().then(res=>{
					console.log(res.rows,"bbb")
					this.testdata=res.rows
					console.log(this.testdata,"cccc")
				})
			},
			
			// 获取当前日期及未来几天的日期
			getFutureDates(daysCount = 7) {
				const now = new Date(); // 当前时间
				const currentDayIndex = now.getDay(); // 当前星期几索引 (0-6)
			
				for (let i = 0; i < daysCount; i++) {
					const date = new Date(now); // 克隆当前时间
					date.setDate(now.getDate() + i); // 设置为未来第 i 天
			
					const month = String(date.getMonth() + 1); // 月份从 0 开始
					const day = String(date.getDate()).padStart(2, '0');
					const weekdayIndex = (currentDayIndex + i) % 7; // 计算未来的星期几索引
			
					// 判断是否为当天
					const isToday = i === 0; // 第一个元素是今天
					const formattedDate = isToday ? '今日' : `${month}.${day}`;
			
					this.dateList.push({
						date: formattedDate, // 格式化日期，如果是当天则显示“今日”
						weekday: this.weekdays[weekdayIndex], // 星期几
						isToday:isToday,
					});
				}
			},
			clickNav(index) {
				this.navindex = index;
				console.log(index,"--------")
				// this.navData=[];
				// this.currentPages=1;
				this.getNewsData(index);
			},
			
			//跳转到详情页
			goDetail(item) {
			    // 使用 uni.$emit 发送数据，uni.$emit 是全局事件通信机制
			    uni.$emit('detailData', item);
			
			    uni.navigateTo({
			        url:`/pages/detail/detail?id=${item.id}&time=${encodeURIComponent(item.time)}&place=${encodeURIComponent(item.place)}&sex=${encodeURIComponent(item.sex)}&more=${encodeURIComponent(item.more)}&number=${encodeURIComponent(item.number)}`
			    });
			},
			
			//获取新闻列表数据
			getNewsData(id =0) {
				this.type=this.sports[id]
				console.log(id,"@@@@")
				if(id==0){
					this.gettest()
					
				}else{
					playList({type:this.type}).then(res=>{
						console.log(res.rows)
						this.testdata=res.rows
					})
				}
				},

		},
	}
</script>

<style lang="scss" scoped>
	#body {
		height:700px;
		// background-color: #d0e6ff;
		background-image: linear-gradient(to top right, #fff, #d0e6ff, #6cc0ff, #55aaff);
	}

	.scroll {
		height: 50px;
		background-color: #f6f6f6;
		white-space: nowrap;
		position: fixed;
		top: var(--window-top);
		left: 0;
		z-index: 10;

		::v-deep ::-webkit-scrollbar {
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}

		.item {
			display: inline-block;
			line-height: 100rpx;
			padding: 0 30rpx;

			&.active {
				color: #55aaff;
			}
		}
	}

	.nodata {
		display: flex;
		justify-content: center;

		image {
			width: 360rpx;
		}
	}

	.content {
		padding: 30rpx;
		padding-top: 110rpx;

		.date {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: -9px;
			width: 380px;
			height: 70px;
			background-color: #fff; /* 背景颜色 */
			border-radius: 10px; /* 圆角 */
			box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.06); /* 添加外阴影 */
			font-family: 'Microsoft YaHei', sans-serif; /* 设置字体为微软雅黑 */
		
			/* 渐变背景（可选） */
			background: linear-gradient(145deg, #ffffff, #f0f0f0);
		
			.day {
				margin-bottom: 10px;
				font-size: 14px;
				font-weight: 550;
				color: #333; /* 字体颜色更深一些 */
			}
		
			h3 {
				margin-left: 5px;
				font-size: 16px;
				font-weight: normal;
				color: #555; /* 字体颜色稍浅一些 */
			}
			
			.today {
			  color: #55aaff; /* 高亮颜色 */
			  font-weight: bold;
			}
		}

		.first {
			width: 378px;
			height: 145px;
			margin-left: -9px;
			margin-top: 20px;
			border-radius: 10px; // 圆角边框
			padding: 10px;
			background-color: #fff; // 背景颜色
			box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.06); // 添加外阴影
			position: relative;
			overflow: hidden;

			// 渐变背景（可选）
			background: linear-gradient(145deg, #ffffff, #f0f0f0);

			// 内嵌阴影效果（可选）
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);
				pointer-events: none;
			}

			.title {
				font-weight: 600;
				font-size: 20px;
				margin-left: 10px;
			}

			.mains {
				width: 320px;
				height: 70px;
				// background-color: #fff;
				margin: 5px 20px;
				font-size: 14px;
				border-bottom: #797979 solid 1.5px;

			}
			.img {
				width: 100px;
				height: 100px;
				border-radius: 15px;
				
				position: absolute;
				right: 30px;
				top: 5px;
				overflow: hidden; /* 防止图片超出盒子范围 */
			}
			
			.img img {
				width: 100%; /* 图片宽度占满父容器 */
				height: 100%; /* 图片高度占满父容器 */
				object-fit: cover; /* 保持图片比例并裁剪多余部分 */
				border-radius: 15px; /* 图片圆角与父容器一致 */
			}

			.bottom {
				display: flex;
				flex-direction: row-reverse;

				.button {
					width: 60px;
					height: 30px;
					background-color: #85c6ff;
					line-height: 30px;
					text-align: center;
					border-radius: 10px;
					margin: -3px 10px;
				}
			}
		}
	}
</style>